var username
// 定义购物车没有数据时显示的页面
var str = `
<div class="m-cart-tips">
<span class="icon-cart-tips"></span>
<div class="cart-tips-cnt">
   <div class="cart-tips-text"> <p>购物袋空空如也，</p>
    <p>快去抢购心仪商品吧~</p></div>
    <div class="cart-tips-actions"><a href="/shoplist.html" class="ui-btn-primary ">立即抢购</a></div>
</div>
</div>
`
$(document).ready(function () {
    // 检查用户是否登录
    username = new Utils().getCookie('username')
    if (!username) {
        // 提示用户必须登录才能访问，强制跳转会登录页面，登录成功后再回来
        layer.msg('非法访问！请先登录！', {
            icon: 2,
            time: 1500
        }, function () {
            localStorage.setItem('url', location.href)
            location.href = 'login.html'
        })

        
    }
    var usernametag = document.querySelector(`.welcome-text`)
    var logouttag = document.querySelector(`.header_lnkLogOut`)
    if (username) {
        console.log(usernametag, logouttag)
        usernametag.innerHTML = `
            欢迎<b>${username}来到唯品会！
        `
        logouttag.innerHTML = `
            <a href="javascript:;" class="logout">退出</a>
        `
    }
    $(`.logout`).click(function() {
        if (confirm(`你确定要退出吗`)) {
            removeCookie(`username`)
            usernametag.innerHTML = `
            <a href="./login.html" class="login">请登录</a>
        `
            logouttag.innerHTML = `
        <a href="./register.html" class="register">注册</a>`
        }
    })

    var cartData = localStorage.getItem('cartData')
    // 判断是否有数据
    if (!cartData) {
        $('.cart').empty() // 不显示表格
        $('.cart').html(str)
    } else {
        // 判断数据中是否当前用户的数据
        cartData = JSON.parse(cartData) // 将获取到的json字符串转成数组
        // 从数组中过滤出当前用户的数据
        var userData = cartData.filter(item => item.username === username)
        // 判断
        if (userData.length) {
            // 有 - 根据当前用户数据中的id获取到商品所有信息
            $.get('/getGoodlist', res => {
                res = JSON.parse(res)
                var data = res.data
                // console.log('所有商品', data);
                // console.log('当前用户的购物车数据', userData);
                // 从所有数据中筛选出当前用户的所有商品数据
                // 遍历userData
                var arr = []
                userData.forEach(item => {
                    // item.id
                    arr.push(data.find(v => v.id == item.id))
                })
                // console.log(arr);
                var html = ''
                arr.forEach(item => {
                    var number = userData.find(v => v.id == item.id).number
                    html += `
                   
    
                      
                                <div class="orders-bd">
                                    <div class="goodsGroup"  data-id="${item.id}">
                                        <table class="table orders-table">
                                            <tbody>
                                                <tr class="J_goods_item">
                                                    <td class="product-item">
                                                        <div class="product-small">
                                                            <div class="j_checkbox"><input type="checkbox" class="J_supplier" name="checkOne">
                                                            </div>
                                                            <div class="product-pic"><a href=""><img
                                                                        src="${item.fangda2}"
                                                                        alt=""></a></div>
                                                            <div class="product-info">
                                                                <h3 class="product-title"><a href="/product.html?id=${item.id}">${item.title}</a></h3>
                                                                <p class="product-size">尺码：蓝牙耳机套餐</p>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td class="price-item">
                                                        <div class="m-price">
                                                        <span class="u-yen">¥</span>
                                                        <strong class="u-price">${item.price}/¥<span class="xiaoji"></span></strong>
                                                        </div>
                                                    </td>


                                                    
                                                    <td class="quantity-item">
                                                        <div class="m-amount">
                                                            <a class="amount-trigger">-</a>
                                                            <div class="amount-num"><input type="text" value="${number}"></div>
                                                            <a class="cart_numAdd">+</a>
                                                        </div>
                                                    </td>
                                                    <td class="actions-item">
                                                        <div class="m-order-del">删除</div>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                             
                  
                    `
                })
                $('.orders-bd').html(html)
                // 操作页面中的数据实现购物车功能
                // 全选功能
                checkAll()
                // 单选功能
                checkOne()
                // 数量加和减
                addAndReduce()
                // 删除单个商品的功能
                del()
                // 删除选中的商品
                remove()
                // 计算小计、总数量、总价格
                total()
            })

        } else {
            // 没有
            $('.cart').empty() // 不显示表格
            $('.cart').html(str)
        }
    }




    function total() {
        // 小计
        $('.u-price').each(function (i, v) {
            var price = parseInt($(v).text())
            var number = $(v).parent().parent().next().find('input').val() - 0
            // console.log(number)
            var subtotal = price * number
            // console.log(number, price, subtotal)
            $(v).find(`span`).eq(0).text(subtotal)
        })
        // 总数量和总价格
        var num = 0
        var totalPrice = 0
        $('[name="checkOne"]:checked').each(function (i, v) {
            num += $(v).parent().parent().parent().next().next().find('input').val() - 0
            // console.log(num)
            totalPrice += parseInt($(v).parent().parent().parent().next().find(`.xiaoji`).text())
        })
        $('.p-num').text(num)
        $('.p-tp').text(`¥` + totalPrice)
    }
    // 删除选中商品的功能
    function remove() {
        console.log($('.del'))
        $('.del').click(function () {
            console.log(111)
            layer.confirm('你确定要删除吗？', {
                btn: ['确定', '取消']
            }, () => {
                // 获取本地存储数据
                var cartData = localStorage.getItem('cartData')
                cartData = JSON.parse(cartData)
                $('[name="checkOne"]:checked').each(function (i, v) {
                    var id = $(v).parent().parent().parent().parent().parent().parent().attr('data-id')
                    var index = cartData.findIndex(item => item.username === username && item.id == id)
                    console.log(index);
                    cartData.splice(index, 1)
                })
                localStorage.setItem('cartData', JSON.stringify(cartData))
                // 删除页面中的tr
                $('[name="checkOne"]:checked').parent().parent().parent().parent().parent().parent().parent().parent().remove()
                if (!$('.goodsGroup').html()) {
                    $('.cart').empty() // 不显示表格
                    $('.cart').html(str)
                }
                layer.msg('删除成功', {
                    icon: 1,
                    time: 1500
                })
                total()
            }, () => {
                layer.msg('取消删除成功', {
                    icon: 1,
                    time: 1500
                })
            })
        })
    }
    // 删除单个商品的功能
    function del() {
        $('.m-order-del').click(function () {
            layer.confirm('你确定要删除吗？', {
                btn: ['不要了', '留着吧']
            }, () => {
                // 将本地存储中的数据也删掉
                var cartData = localStorage.getItem('cartData')
                cartData = JSON.parse(cartData)
                var id = $(this).parent().parent().attr('data-id')
                var index = cartData.findIndex(item => item.username === username && item.id == id)
                cartData.splice(index, 1)
                localStorage.setItem('cartData', JSON.stringify(cartData))
                $(this).parent().parent().parent().parent().parent().remove()
                if (!$('.goodsGroup').html()) {
                    $('.cart').empty() // 不显示表格
                    $('.cart').html(str)
                }

                layer.msg('删除成功！', {
                    icon: 1,
                    time: 1500
                })
                total()
            }, function () {
                layer.msg('留下了', {
                    icon: 1,
                    time: 1500
                })
            })
        })
    }
    // 数量加减的功能
    function addAndReduce() {
        // 加
        $('.cart_numAdd').click(function () {
            var num = $(this).prev().find(`input`).val()
            num++
            $(this).prev().find(`input`).val(num)
            // 让本地存储中的number跟当前改变后的number保持一致
            // 获取本地存储数据
            var cartData = localStorage.getItem('cartData')
            cartData = JSON.parse(cartData)
            // console.log(cartData);
            var userData = cartData.filter(item => item.username === username)
            console.log(userData);
            // 获取当前点击的这个商品的id
            var id = $(this).parent().parent().parent().parent().parent().parent().attr('data-id')
            console.log(id);
            // 从userData中找到商品id为获取到的id的对象，让他的number跟上面++以后的num保持一致
            var obj = userData.find(item => item.id == id)
            obj.number++
            // console.log(cartData);
            localStorage.setItem('cartData', JSON.stringify(cartData))
            total()
        })
        // 减
        $('.amount-trigger').click(function () {
            var num = $(this).next().find(`input`).val()
            num--
            if (num < 1) {
                return false
            }
            $(this).next().find(`input`).val(num)
            // 让本地存储中的number跟当前改变后的number保持一致
            // 获取本地存储数据
            var cartData = localStorage.getItem('cartData')
            cartData = JSON.parse(cartData)
            // console.log(cartData);
            var userData = cartData.filter(item => item.username === username)
            console.log(userData);
            // 获取当前点击的这个商品的id
            var id = $(this).parent().parent().parent().parent().parent().parent().attr('data-id')
            console.log(id);
            // 从userData中找到商品id为获取到的id的对象，让他的number跟上面++以后的num保持一致
            var obj = userData.find(item => item.id == id)
            obj.number--
            // console.log(cartData);
            localStorage.setItem('cartData', JSON.stringify(cartData))
            total()
        })
    }
    // 单选功能
    function checkOne() {
        // 给单选绑定事件
        $('[name="checkOne"]').click(function () {
            // 判断是否全部选中
            var arr = Array.from($('[name="checkOne"]'))
            // console.log(arr);
            var bool = arr.every(item => item.checked)
            $('[name="checkAll"]').prop('checked', bool)
            total()
        })
    }
    // 实现全选功能的函数
    function checkAll() {
        // 给全选绑定单击事件
        $('[name="checkAll"]').click(function () {
            // 让所有的单选
            $('[name="checkOne"]').prop('checked', $(this).prop('checked'))
            $('[name="checkAll"]').prop('checked', $(this).prop('checked'))
            total()
        })
    }
})